import { PureComponent, Fragment } from "react"
import { ImagePicker } from "antd-mobile"
import { isNull } from "../../utils/helper"
import MyUploadImgIOS from "./MyForm/MyUploadImgNew"
import MyUploadImgOss from "./MyForm/MyUploadImgOss"
export default class MiUploadImg extends PureComponent {
	constructor(props) {
		super(props);
		this.state = {
			hasError: false,
			value: [],
			multiple: true
		}
	}

	componentWillReceiveProps(next) {
		let { isReset: oldReset } = this.props;
		let { isReset: newReset } = next;
		if (oldReset !== newReset && newReset) {
			this.setState({
				hasError: false
			})
		}
	}
	onChange = (files, type, index) => {
		this.setState({
			value: files,
		});
	};
	render() {
		let { getFieldDecorator, field, defaultFormData, label, required, disabled, readonly, show_label, tips, label_width = 5, is_oss = 0, label_text_align, label_text_color, horizontal = 0 } = this.props;
		let isOss = is_oss == 1;
		let isHorizontal = horizontal == 1;
		let Com;
		if (isOss) {
			Com = MyUploadImgOss
		}
		else {
			// if(browser.isInIos){// ios完成 待安卓完成
			Com = MyUploadImgIOS
			// }
			// else{
			// Com=MyUploadImg
			// }
		}
		let { value } = this.state;
		let isDisabled = disabled == 1;
		let isReadonly = readonly == 1;
		let isShowLabel = isNull(show_label) || show_label == 1;
		let { hasError } = this.state;
		let isRequired = required == 1;
		let requiredClass = "am-list-item";
		if (isRequired) {
			requiredClass += " required"
		}
		let dataFlex = {

		};
		if (isHorizontal) {
			dataFlex = {
				"data-flex": "dir:left"
			}
		}
		return (
			<div>
				<div className="mi-upload-img" data-flex="dir:left box:first" style={{ paddingRight: '15px' }}>
					<div style={{ width: "15px", lineHeight: "40px" }}>
						{
							isRequired && <p style={{ color: "#f5222d", fontSize: "14px", textAlign: "center", fontFamily: "SimSun" }}>*</p>
						}
					</div>
					<div {...dataFlex}>
						{
							isShowLabel && <p style={{ lineHeight: "40px", fontSize: "16px", width: label_width * 17 + "px", textAlign: label_text_align, color: label_text_color }}>{label}:</p>
						}
						{
							getFieldDecorator(field[0], {
								initialValue: defaultFormData[field[0]],
								rules: [{
									validator: (rule, value, callback) => {
										if (isRequired) {
											if (isNull(value)) {
												if (!hasError) {
													this.setState({
														hasError: true,
														errorMsg: "请选择：" + label
													})
													callback("请选择：" + label)
												}
											}
											else {
												this.setState({
													hasError: false,
													errorMsg: ""
												})
												callback()
											}
										}
										callback()
									}
								}]
							})(<Com {...this.props} />)
						}
						{tips && <p className="tipsStyle" style={{ margin: 0 }}>{tips}</p>}
					</div>
				</div>
			</div>
		)
	}
}